<template>
  <div class="myDiv">
    <!-- 组件形式 -->
    <Newcard :title="activeFileInfo.name" :isScroll="true" :isright="true">
      <i
        @click="drawer = true"
        slot="title"
        class="el-icon-edit title_icon"
      ></i>
      <div class="record_img">
        <div class="item" v-for="(item, index) in imgArray" :key="index">
          <img :src="item" />
          <div class="nums">{{ index + 1 }}/{{ imgArray.length }}</div>
        </div>
      </div>
      <!-- 文档内容 -->
      <div class="myDiv_bottom flex ">
        <div class="left flex">
          <div class="flex_item">
            <i class="el-icon-message"></i>
            <span>暂无</span>
          </div>
          <div class="flex_item" @click="openShare">
            <i class="el-icon-share"></i>
            <span>{{ shareRecordList.length }}</span>
          </div>
          <div class="flex_item" @click="openComment">
            <i class="el-icon-chat-dot-round"></i>
            <span>{{ commentList.length }}</span>
          </div>
          <div
            class="flex_item"
            v-if="status == 2 && activeFileInfo.status == 1"
            @click="changeRecord"
          >
            <svg-icon icon-class="record_zh" />
            <span>转历史档案</span>
          </div>
          <div
            class="flex_item"
            v-if="status == 3 && activeFileInfo.status == 0"
            @click="changeRecord"
          >
            <svg-icon icon-class="record_zh" />
            <span>转活动档案</span>
          </div>
        </div>
        <div class="right flex">
          <div class="right_box right_dc" @click="getConsultLink">
            <el-button  class="button" round>我要咨询</el-button>
          </div>
          <div class="right_box right_ac">
            <el-button round @click="downLoadPdf">下载文档</el-button>
          </div>
        </div>
      </div>
    </Newcard>

    <!-- 修改文档内容的抽屉 -->
    <Comdrawer
      @eventColse="showDrawer"
      title="修改文档信息"
      :drawer="drawer"
      :showClose="true"
    >
      <div class="p_30">
        <el-form :model="pageDatas" label-position="left">
          <el-form-item prop="name" label="文档名称" label-width="130px">
            <el-input
              disabled
              :placeholder="activeFileInfo.name"
              class="w100"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="contractType"
            label="文档类别"
            label-width="130px"
          >
            <el-select
              v-model="pageDatas.contractType"
              class="w100"
              placeholder="请选择"
            >
              <el-option
                v-for="item in contractTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="property" label="文档属性" label-width="130px">
            <el-select
              class="w100"
              v-model="pageDatas.property"
              placeholder="请选择"
            >
              <el-option
                v-for="item in propertyList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="生效日期"
            label-width="130px"
            prop="effectiveTime"
            v-if="pageDatas.property < 3"
          >
            <el-date-picker
              v-model="pageDatas.effectiveTime"
              type="date"
              placeholder="生效日期"
              format="yyyy年MM月dd日"
              class="w100"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="到期日期"
            label-width="130px"
            prop="expiredTime"
            v-if="pageDatas.property == 2"
          >
            <el-date-picker
              v-model="pageDatas.expiredTime"
              type="date"
              placeholder="生效日期"
              format="yyyy年MM月dd日"
              class="w100"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer flex flex_fe">
        <div class="submit" @click="editContract">保存</div>
      </div>
    </Comdrawer>
    <!-- 修改分享者的抽屉 -->
    <Comdrawer
      @eventColse="closeShare"
      :title="shareTitle"
      :drawer="deleteDrawer"
      :showClose="true"
    >
      <div class="p_30">
        <el-input
          v-if="inputType"
          placeholder="搜索分享者"
          prefix-icon="el-icon-search"
          class="search_in"
          ref="inputSearch"
          @blur="inputType = false"
          v-model="keyWord"
        >
        </el-input>
        <div class="search_box flex" v-else @click="openSearch">
          <i class="el-icon-search"></i>
          <span>搜索分享者</span>
        </div>
        <!-- 分享者列表 -->
        <div class="person_list">
          <div
            class="person_list_item flex flex_js"
            v-for="item in personAcList"
            :key="item.userId"
          >
            <div class="flex" :class="item.share ? 'opac' : ''">
              <div class="header">
                <img
                  class="img_box"
                  :src="item.avatar || defaultAvatar"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="item_info">
                <div>{{ item.nickname }}</div>
                <span>{{ item.phonenumber || item.type }}</span>
              </div>
            </div>
            <!-- 选择按钮 -->
            <el-checkbox
              v-if="changeType"
              class="checkBox"
              v-model="item.value"
              :disabled="item.disabled"
              :checked="item.checked"
            >
            </el-checkbox>
          </div>
          <div class="footer flex flex_js">
            <h1>已选：{{ shareNum }}个</h1>
            <div class="submit" @click="submitShare">确认{{ submitType }}</div>
          </div>
        </div>
      </div>
    </Comdrawer>
    <!-- 分享记录抽屉 -->
    <Comdrawer
      @eventColse="showDrawer"
      :title="title"
      :drawer="shareDrawer"
      :showClose="true"
    >
      <div class="p_30">
        <!-- 被分享者列表 -->
        <div class="share_top border_b">
          <b>被分享者 ({{ shareList.length }})</b>
          <div class="share_header_list flex">
            <div
              class="header_item header_box m_r_10"
              v-for="item in shareList"
              :key="item.userId"
            >
              <img class="img_box" :src="item.avatar || defaultAvatar" alt="" />
            </div>
            <!-- 添加和减少按钮 -->
            <div
              class="header_handle header_box m_r_10"
              @click="changeShare(0)"
            >
              <i class="el-icon-plus"></i>
            </div>
            <div class="header_handle header_box" @click="changeShare(1)">
              <i class="el-icon-minus"></i>
            </div>
          </div>
        </div>
        <!-- 外享记录 -->
        <div class="share_record">
          <b class="share_record_title">
            外享记录 ({{ shareRecordList.length }})
          </b>
          <div
            class="share_record_item border_b flex flex_js"
            v-for="item in shareRecordList"
            :key="item.id"
          >
            <div class="share_record_item_left">
              <span>{{ getMemberName(item.createBy) }}</span>
              <span>分享至{{ item.shareRecord }}</span>
            </div>
            <span class="gray">{{ item.createTime }}</span>
          </div>
        </div>

        <!-- 底部菜单 -->
        <div class="footer p_30">
          <div class="emaill_intro gray">
            电邮：讲本内容以文件的形式分享至对方邮箱
          </div>
          <div class="input_box flex">
            <el-input v-model="email" placeholder="请输入对方的邮箱"></el-input>
            <div class="submit_button" @click="sendShareFileMail">确定</div>
          </div>
        </div>
      </div>
    </Comdrawer>
    <!-- 评论 -->
    <Comdrawer
      @eventColse="showDrawer"
      :title="title"
      :drawer="comment"
      :showClose="true"
    >
      <div class="p_30">
        <div
          class="comment_item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <div class="left">
            <img
              class="img_box"
              :src="item.avatar || defaultAvatar"
              alt=""
              srcset=""
            />
          </div>
          <div class="right border_b">
            <div class="right_top">
              <b>{{ item.userName }}</b>
              <span>{{ item.createTime }}</span>
            </div>
            <!-- 评论内容 -->
            <div class="comment_content">
              {{ item.comment }}
            </div>
          </div>
        </div>
        <!-- 发表评论 -->
        <div class="footer comment_footer p_30">
          <el-input
            rows="6"
            v-model="commentText"
            type="textarea"
            placeholder="写评论..."
          ></el-input>
          <div class="submit" @click="addComment">发表</div>
        </div>
      </div>
    </Comdrawer>
  </div>
</template>

<script>
import Newcard from "@/wss/components/newCard.vue";
import Comdrawer from "@/wss/components/Comdrawer.vue";
import {
  getToolFileImageApi,
  getCommentList,
  addComment,
  getShareList,
  getSharePerson,
  addFileShare,
  deleteShare,
  getShareRecordList,
  getMembersInfo,
  sendShareFileMail,
  addShareEmail,
  editContract,
} from "@/BMViews/api/intelligentControl/intelligentControl2.js";
import {
  getContractType,
  addPdfWaterMark,
} from "@/BMViews/api/intelligentControl/intelligentControl.js";
import debounce from "lodash/debounce";
import objectVue from "../../../../../wss/newViews/delivery/reptile/object.vue";

export default {
  components: { Newcard, Comdrawer },
  props: {
    //文件信息
    activeFileInfo: {
      type: Object,
      default: () => {
        return;
      },
    },
    circle_id: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      defaultAvatar: require("@/assets/images/defaultAvatar.jpg"),
      drawer: false, //修改文档抽屉显示
      type: 2,
      keyWord: "", //搜索用户关键字
      pageDatas: {
        name: "",
        property: "", //文档属性
        contractType: "", //文档类别id
        effectiveTime: "", //生效时间
        expiredTime: "", //到期时间
        fileType: "image",
        fileboxId: "",
      },
      contractTypeList: [], //文档类别列表
      propertyList: [
        {
          name: "项目型",
          id: 1,
        },
        {
          name: "期间型",
          id: 2,
        },
        {
          name: "模板型",
          id: 3,
        },
      ],

      value: "",
      startDate: "",
      endDate: "",
      menbersInfo: [], //角色信息
      // 删除分享者
      personList: [], //接口保存的list
      personAcList: [], //关键字查找list
      deleteDrawer: false,
      submitType: "", //底部菜单文本
      // 分享记录
      shareDrawer: false,
      shareList: [], //内享列表
      shareTitle: "", //修改分享者标题
      changeType: false, //勾选强制刷新
      shareRecordList: [], //外享列表
      email: "", //分享邮箱
      inputType: false, //输入框状态判断
      // 评论抽屉
      comment: false,
      commentText: "",
      commentList: [],

      //详情文件
      imgArray: [],

      //抽屉标题
      title: "",
    };
  },
  watch: {
    activeFileInfo: {
      deep: !0,
      immediate: true,
      handler: function (newValue, oldValue) {
        this.getFileShow();
        if (JSON.stringify(newValue) != "{}") {
          this.getComment();
          this.getSharePerson();
          this.getShare();
          this.getShareRecordList();
        }
      },
    },
    keyWord: {
      handler(newValue) {
        if (newValue) {
          this.personAcList = this.personList.filter((item) => {
            let strValue =
              item.nickname + item.phonenumber.trim().replace(/\s*/g, "");
            return strValue.indexOf(this.keyWord) != -1;
          });
        } else {
          this.personAcList = JSON.parse(JSON.stringify(this.personList));
        }
      },
    },
  },
  computed: {
    shareNum() {
      let num = 0;
      this.personAcList.forEach((item) => {
        if (item.value && !item.disabled) {
          num += 1;
        }
      });
      return num;
    },
  },
  methods: {
    // 格式化时间
    formatData(e) {
      return (
        e.getFullYear() +
        "-" +
        (e.getMonth() + 1) +
        "-" +
        e.getDate() +
        " " +
        "00:00:00"
      );
    },
    // 修改文档内容
    showDrawer() {
      this.shareDrawer = this.comment = this.drawer = false;
    },
    // 获取文档类别
    async getContractType() {
      try {
        const res = await getContractType({
          type: 1,
          status: 0,
        });

        if (res.code == 200) {
          this.contractTypeList = res.rows;
        }
      } catch (err) {
        throw error(err);
      }
    },
    // 下载文档
    downLoadPdf: debounce(async function () {
      const res = await addPdfWaterMark({
        fileId: this.activeFileInfo.id,
      });
      if (res.code == 200) {
        console.log(res);
        window.location.href = res.msg;
      }
    }, 300),
    // 修改文档
    async editContract() {
      let data = JSON.parse(JSON.stringify(this.activeFileInfo));

      //判断当前输入内容
      if (!this.pageDatas.property || !this.pageDatas.contractType) {
        this.$message({
          message: "有选项未选择",
          type: "warning",
        });
        return;
      }

      if (this.pageDatas.property == 1 && !this.pageDatas.effectiveTime) {
        this.$message({
          message: "请选择生效时间",
          type: "warning",
        });
        return;
      }
      if (
        this.pageDatas.property == 2 &&
        (!this.pageDatas.effectiveTime || !this.pageDatas.expiredTime)
      ) {
        this.$message({
          message: "请选择完整的时间段",
          type: "warning",
        });
        return;
      }

      data.property = this.pageDatas.property;
      data.contractType = this.pageDatas.contractType;

      if (data.property == 1) {
        data.effectiveTime = this.formatData(this.pageDatas.effectiveTime);
        data.expiredTime = "";
      } else if (data.property == 2) {
        data.effectiveTime = this.formatData(this.pageDatas.effectiveTime);
        data.expiredTime = this.formatData(this.pageDatas.expiredTime);
      } else {
        data.effectiveTime = "";
        data.expiredTime = "";
      }

      const res = await editContract(data);
      if (res.code == 200) {
        this.$message({
          message: "修改成功",
          type: "success",
        });

        this.drawer = false;
      }
    },
    // 修改档案状态
    changeRecord: debounce(async function () {
      let info = JSON.parse(JSON.stringify(this.activeFileInfo));
      if (info.status == 1) {
        info.status = 0;
      } else {
        info.status = 1;
      }
      const res = await editContract(info);
      if (res.code == 200) {
        this.$message({
          message: "操作成功",
          type: "success",
        });
        if (info.status == 0) {
          this.$bus.$emit("updateAcList"); //更新活动档案列表
        } else {
          this.$bus.$emit("updateHistoryList"); //更新历史档案列表
        }
      }
    }, 300),
    // 文档属性发生改变
    changeValue(e) {
      this.type = e;
    },

    //获取文档详情
    async getFileShow() {
      if (!this.activeFileInfo.id) return;

      let result = await getToolFileImageApi({
        fileId: this.activeFileInfo.id,
      });
      if (result.code == 200) {
        this.imgArray = result.rows;
      }
    },
    // 打开评论
    openComment() {
      this.comment = true;
      this.title = "评论" + "(" + this.commentList.length + ")";
    },
    // 获取评论列表
    async getComment() {
      const res = await getCommentList({
        fileId: this.activeFileInfo.id,
      });
      if (res.code == 200) {
        this.commentList = res.rows;
      }
    },
    // 发表评论
    async addComment() {
      const res = await addComment({
        comment: this.commentText,
        fileId: this.activeFileInfo.id,
      });
      if (res.code == 200) {
        this.$message({
          message: "发布成功",
          type: "success",
        });
        this.getComment();
      }
    },

    // ---------------------分享
    // 获取搜索框焦点
    openSearch() {
      this.inputType = true;
      this.$nextTick(() => {
        this.$refs.inputSearch.focus();
      });
    },
    // 分享模块
    async openShare() {
      await this.getShareRecordList();
      await this.getShare();
      this.shareDrawer = true;
      this.title =
        "分享记录" +
        "(" +
        (this.shareList.length + this.shareRecordList.length) +
        ")";
    },
    // 获取分享列表
    async getShare() {
      const res = await getShareList({
        fileId: this.activeFileInfo.id,
      });
      if (res.code == 200) {
        this.shareList = res.rows;
      }
    },
    // 获取可分享列表
    async getSharePerson() {
      const res = await getSharePerson({
        fileId: this.activeFileInfo.id,
        fileboxId: this.circle_id,
      });
      if (res.code == 200) {
        this.personList = res.rows;
        this.personAcList = JSON.parse(JSON.stringify(res.rows));
      }
    },
    // 修改分享者
    changeShare(e) {
      this.shareDrawer = false;
      this.personAcList = JSON.parse(JSON.stringify(this.personList));
      if (e == 0) {
        this.shareTitle = "增加分享者";
        this.personAcList.forEach((item) => {
          item.disabled = item.checked = false;
        });
        this.personAcList.forEach((item) => {
          for (let i in this.shareList) {
            if (item.userId == this.shareList[i].userId) {
              item.disabled = item.value = item.checked = true;
            } else {
            }
          }
        });
      } else {
        this.shareTitle = "删除分享者";
        this.personAcList.forEach((item) => {
          item.disabled = item.checked = true;
        });
        this.personAcList.forEach((item) => {
          for (let i in this.shareList) {
            if (item.userId == this.shareList[i].userId) {
              item.disabled = item.checked = false;
            }
          }
        });
      }
      this.changeType = true;
      this.deleteDrawer = true;
    },
    // 增加分享者
    addShare: debounce(async function () {
      let shares = [];
      let arr = [];
      this.personAcList.forEach((item, index) => {
        if (item.value && !item.disabled) {
          shares.push(item.userId);
          arr.push(index);
        }
      });

      const res = await addFileShare({
        fileId: this.activeFileInfo.id,
        sharers: shares.join(","),
      });
      if (res.code == 200) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.changeType = false;
        arr.forEach((item) => {
          this.personAcList[item].disabled =
            this.personAcList[item].value =
            this.personAcList[item].checked =
              true;
        });
        this.changeType = true;
      }
    }),

    //关闭修改分享框
    async closeShare() {
      this.deleteDrawer = false;
      this.changeType = false;
      await this.getShare();
      this.shareDrawer = true;
    },
    // 删除内享分享
    async deleteShare() {
      let shares = [];
      let arr = [];
      this.personAcList.forEach((item, index) => {
        if (item.value && !item.disabled) {
          shares.push(item.userId);
          arr.push(index);
        }
      });
      const res = await deleteShare({
        fileId: this.activeFileInfo.id,
        sharers: shares.join(","),
      });
      if (res.code == 200) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.changeType = false;
        arr.forEach((item) => {
          this.personAcList[item].disabled = this.personAcList[
            item
          ].value = true;
        });
        this.changeType = true;
      }
    },
    // 获取外享记录
    async getShareRecordList() {
      const res = await getShareRecordList({
        file_id: this.activeFileInfo.id,
      });
      if (res.code == 200) {
        let arr = [];
        res.rows.forEach((item) => {
          arr.push(item.createBy);
        });
        this.shareRecordList = res.rows;
        this.title =
          "分享记录" +
          "(" +
          (this.shareList.length + this.shareRecordList.length) +
          ")";
        await this.getMembersInfo(arr);
      }
    },
    // 获取用户信息
    async getMembersInfo(e) {
      const res = await getMembersInfo({
        userIds: Array.from(new Set(e)).join(","),
      });
      if (res.code == 200) {
        this.menbersInfo = res.data;
      }
    },
    // 匹配用户名称
    getMemberName(e) {
      let name = "";
      this.menbersInfo.forEach((item) => {
        if (e == item.userId) {
          name = item.nickName;
        }
      });

      return name;
    },
    //发送电邮
    sendShareFileMail: debounce(async function () {
      const res = await sendShareFileMail({
        to: this.email,
        fileName: this.activeFileInfo.name,
        fileName: this.activeFileInfo.url,
      });
      if (res.code == 200) {
        this.$message({
          message: "发送成功",
          type: "success",
        });
        await this.addShareEmail();
        this.getShareRecordList();
      }
    }),
    // 后台添加记录
    async addShareEmail() {
      let shareRecord = "给邮箱" + this.email;
      const res = await addShareEmail({
        fileId: this.activeFileInfo.id,
        shareRecord,
      });
    },
    // 确认添加和删除
    submitShare() {
      if (this.shareTitle.indexOf("增加") == 0) {
        this.addShare();
      } else {
        this.deleteShare();
      }
    },

    // 咨询
    // 获取咨询第一条链接
    getConsultLink() {
      let consult = this.$router.options.routes.find((item) => {
        return item.path == "/Bm-Consult";
      });
      this.$router.push({ path: consult.children[0].path });
    },
  },
  created() {},
  mounted() {
    this.getComment();
    this.getContractType();
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}

.flex_js {
  justify-content: space-between;
}

.flex_fe {
  justify-content: flex-end;
}

.border_b {
  border-bottom: 1px solid #efefef;
}

.m_r_10 {
  margin-right: 10px;
}

.gray {
  color: #999999;
}
.img_box {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
::v-deep .person_list_item .el-checkbox__inner {
  border-radius: 50%;
}

::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}

::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #e6e6e6;
  opacity: 0.3;
}

::v-deep .input_box .el-input__inner {
  width: calc(100% - 124px);
  padding: 0;
  margin-left: 15px;
  height: 38px;
  border: none;
}

::v-deep .footer .el-textarea__inner {
  resize: none;
  border: none;
}
::v-deep .el-input--medium .el-input__inner {
  border-radius: 20px !important;
}

.opac {
  opacity: 0.3;
}

.p_30 {
  padding: 0 20px;
  .search_box {
    width: 100%;
    height: 36px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #c4c6ca;
    justify-content: center;

    i {
      margin-right: 7px;
      color: #cccccc;
    }

    span {
      font-size: 12px;
      color: #cccccc;
    }
  }

  .person_list {
    .person_list_item {
      width: 100%;
      height: 70px;
      border-bottom: 1px solid #efefef;

      .header {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: gray;
        margin-right: 12px;
      }

      .item_info {
        font-size: 14px;
        color: #232323;

        div {
          margin-bottom: 3px;
        }

        span {
          color: #999999;
          font-size: 12px;
        }
      }

      .checkBox {
        transform: scale(1.5);
      }
    }
  }

  // 分享记录部分
  .share_top {
    margin: 14px 0 17px;
    padding-bottom: 20px;

    .share_header_list {
      margin-top: 14px;

      .header_box {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }

      .header_item {
        background-color: #999999;
      }

      .header_handle {
        border: 1px dashed #cccccc;
        text-align: center;
        line-height: 32px;

        i {
          color: #999999;
        }
      }
    }
  }

  .share_record {
    margin-top: 17px;

    .share_record_item {
      font-size: 12px;
      color: #333333;
      height: 45px;

      .share_record_item_left {
        span {
          margin-right: 3px;
        }
      }
    }
  }

  // 底部邮箱输入框
  .input_box {
    width: 100%;
    height: 44px;
    border-radius: 25px;
    border: 1px solid #d7d7d7;
    padding: 0 3px;

    .submit_button {
      width: 124px;
      height: 38px;
      background-color: #f87a23;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      line-height: 38px;

      border-radius: 21px;
    }
  }

  .footer {
    height: 100px !important;
    padding-top: 13px !important;
    background-color: #fff;
    box-sizing: border-box;
    .emaill_intro {
      margin-bottom: 8px;
      font-size: 12px;
    }
  }

  // 评论
  .comment_item {
    display: flex;
    margin-bottom: 24px;

    .left {
      width: 40px;
      height: 40px;
    }

    .right {
      flex: 1;
      margin-left: 10px;
      padding-bottom: 20px;

      .right_top {
        font-size: 14px;
        color: #333333;
        margin-bottom: 11px;

        span {
          margin-left: 12px;
          font-size: 12px;
          color: #999999;
        }
      }

      .comment_content {
        font-size: 14px;
        color: #333333;
      }
    }
  }

  .comment_footer {
    height: 200px !important;

    .submit {
      margin-left: auto;
    }
  }
}

.w100 {
  width: 100%;
}

.myDiv {
  position: relative;
  height: 100%;

  // background: #ffffff;
  // border-radius: 12px;
  // border: 1px solid #ecedf0;
  .title_icon {
    margin-left: 12px;
    font-size: 14px;
  }

  .myDiv_header {
    display: flex;
    align-items: center;
    height: 86px;
    border-bottom: 1px solid #efefef;

    span {
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-left: 13px;
    }

    i {
      color: #999999;
      margin-left: 14px;
    }
  }

  .myDiv_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 45px;
    padding: 0 30px;
    border-radius: 0px 0px 12px 12px;
    border-top: 1px solid #ecedf0;
    background-color: #fff;
   
    box-sizing: border-box;

    .left {
      font-size: 14px;
      color: #333333;
      font-family: PingFangSC-Regular, PingFang SC;

      .flex_item {
        margin-right: 42px;
        color: #999999;
        &:hover {
          cursor: pointer;
        }
        span {
          margin-left: 8px;
        }
      }
    }

    .right {
      margin-left: auto;

      .right_box {
        width: 110px;
        // height: 40px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #f87a23;
        .button:hover{
            background-color: #fff;
        }
      }

      .right_ac {
        ::v-deep .el-button {
          border: 1px solid #f87a23;
          background-color: #f87a23;
          color: #fff;
        }
      }

      .right_dc {
        margin: 0 10px 0 auto;
        ::v-deep .el-button {
          border: 1px solid #f87a23;
          color: #f87a23;
        }
      }
    }
  }

  // 抽屉底部样式
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80px;
    width: 100%;
    padding: 0 30px;
    border-top: 1px solid #ecedf0;

    .submit {
      width: 110px;
      height: 40px;
      background: #f87a23;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      color: #fff;
    }
  }
}
.record_img {
  position: relative;
}
.record_img img {
  width: 100%;
}
.record_img .item {
  position: relative;
  margin-bottom: 20px;
}
.record_img .item .nums {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  padding: 4px 8px;
  color: #fff;
  font-size: 12px;
}
</style>